<template>
  <div id="goodsIndex">
<!--    <span>商品id为:{{id}}</span>-->
    <br>
    <el-card>
      <el-breadcrumb class="pdt10 pdb30" separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">手机</a></el-breadcrumb-item>
        <el-breadcrumb-item>apple</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row>
        <el-col :span="10">
          <el-row style="border: 1px solid #DCDFE6;width: 472px;height: 472px">
            <el-image :src="checkedImgUrl" style="height: 470px;width: 470px" :previewSrcList="previewSrcList"></el-image>
          </el-row>
          <el-row class="pdt30">
            <div v-for="(item,index) in imgUl" :key="index" class="img_list" @click="checkImg(index)">
              <!--使用vue动态绑定class的时候, 一定要记得最好绑定两个, 一个是被选中的css, 一个是未被选中的css-->
              <el-tag class="pdr5" :class="{img_list_checked: item.checked, img_list_not_checked: !item.checked}" style="height: 59px;" type="info" effect="plain" size="medium">
                <el-image :src="item.url" style="width: 55px;height: 55px"></el-image>
              </el-tag>
            </div>
          </el-row>
        </el-col>
        <el-col :span="1"><div class="none"></div></el-col>
        <el-col :span="13">
          <div class="header padding10">
            <span style="font-weight: bolder;font-size: 1.4em">{{ goodsDetail.name }}</span>
          </div>
          <div class="main">
            <el-form ref="form" :model="form" label-width="70px">
              <el-form-item label="价格">
                <div v-if="goodsDetail.discount != 0">
                  <span style="color:#F56C6C; font-size: 2em;">￥{{goodsDetail.discount}}</span>
                  &nbsp;&nbsp;[<span style="text-decoration: line-through;">￥{{goodsDetail.price}}</span>]</div>
                <div v-if="goodsDetail.discount == 0"><span style="color:#F56C6C; font-size: 2em;">￥{{goodsDetail.price}}</span></div>
              </el-form-item>
              <el-form-item label="优惠券">
                <div class="pdr5 fl" v-for="(item,index) in goodsDetail.couponList" :key="index">
                  <el-tag type="danger">{{item}}</el-tag>
                </div>
              </el-form-item>
              <el-form-item label="重量">
                <span>{{goodsDetail.wight}}</span>
              </el-form-item>
              <el-divider></el-divider>
              <el-form-item label="选择颜色">
                <div class="pdr5 fl" v-for="(item,index) in goodsDetail.colorList" :key="index" @click="checkColor(index)">
                  <el-tag class="pdr5" style="height: 54px" type="info" effect="plain" size="medium" :class="{img_list_checked: item.checked}">
                    <div>
                      <div class="fl">
                        <el-image :src="item.imgUrlList[0]" style="width: 50px;height: 50px"></el-image>
                      </div>
                      <div class="fl" style="margin-top: 11px">
                        <span style="font-size: 1.3em;padding-left: 5px">{{item.color}}</span>
                      </div>
                    </div>
                  </el-tag>
                </div>
              </el-form-item>
              <el-form-item label="内存">
                <div class="pdr5 fl" v-for="(item,index) in goodsDetail.RAMList" :key="index" @click="checkRAM(index)">
                  <el-tag type="info" :effect=" item.checked ? 'dark' : 'plain' ">{{item.name}}</el-tag>
                </div>
              </el-form-item>
              <el-form-item label="版本">
                <div class="pdr5 fl" v-for="(item,index) in goodsDetail.typeList" :key="index" @click="checkType(index)">
                  <el-tag type="primary" :effect=" item.checked ? 'dark' : 'plain' ">{{item.name }}</el-tag>
                </div>
              </el-form-item>
              <el-form-item label="套装">
                <div class="pdr5 fl" v-for="(item,index) in goodsDetail.setList" :key="index" @click="checkSet(index)">
                  <el-tag type="success" :effect=" item.checked ? 'dark' : 'plain' ">{{item.name}}</el-tag>
                </div>
              </el-form-item>
              <el-form-item label="服务">
                <div class="pdr5 fl" v-for="(item,index) in goodsDetail.serviceList" :key="index" @click="checkService(index)">
                  <el-tag type="warning" :effect=" item.checked ? 'dark' : 'plain' ">{{item.name}}</el-tag>
                </div>
              </el-form-item>
              <el-divider></el-divider>
              <el-form-item>
                <div class="fl">
                  <el-input-number style="width: 120px" v-model="count" controls-position="right" :min="1"></el-input-number>
                </div>
                <div class="fl pdl30">
                  <el-button type="danger" @click="addShopCart">加入购物车</el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "goodsIndex",
  props: ["id"],
  components: {},
  data() {
    return {
      activeIndex: "1",
      goodsDetail: {},
      imgUl: [],
      count: 1
    }
  },
  computed:{
    checkedImgUrl() {
      let checkedImgUrl = ""
      this.imgUl.forEach((item) => {
        if(item.checked)
          checkedImgUrl = item.url
      })
      return checkedImgUrl
    },
    previewSrcList(){
      let previewSrcList = []
      this.goodsDetail.colorList.forEach((item) => {
        if(item.checked)
          previewSrcList = item.imgUrlList
      })
      return previewSrcList
    },
    form() {
      let form = {color: '',RAM: '',type: '',set: '',service: '',count: 0}
      this.goodsDetail.colorList.forEach((item) => {
        if (item.checked) form.color = item.color
      })
      this.goodsDetail.RAMList.forEach((item) => {
        if (item.checked) form.RAM = item.name
      })
      this.goodsDetail.typeList.forEach((item) => {
        if (item.checked) form.type = item.name
      })
      this.goodsDetail.setList.forEach((item) => {
        if (item.checked) form.set = item.name
      })
      this.goodsDetail.serviceList.forEach((item) => {
        if (item.checked) form.service = item.name
      })
      form.count = this.count
      return form
    }
  },
  methods: {
    toDetail() {
      this.$router.push({path: "/goods/:id/detail"})
    },
    toSpec() {
      this.$router.push({path: "/goods/:id/spec"})
    },
    toService() {
      this.$router.push({path: "/goods/:id/service"})
    },
    toComments() {
      this.$router.push({path: "/goods/:id/comments"})
    },
    checkImg(index) {
      this.imgUl.forEach((item) => {
        item.checked = false
      })
      this.imgUl.forEach((item,index1) => {
        if(index1 == index){
          item.checked = true
          //不写这句，VUE实例不会跟着变化，原因未知
          this.checkedImgUrl = item.url
        }
      })
    },
    checkColor(index) {
      this.goodsDetail.colorList.forEach((item) => {
        item.checked = false
      })
      this.goodsDetail.colorList.forEach((item,index1) => {
        if(index1 == index) {
          item.checked = true
          let showImgUrlList = []
          for (let i = 0; i < item.imgUrlList.length; i++) {
            let img = {url: "", checked: false}
            img.url = item.imgUrlList[i]
            i === 0 ? img.checked = true : img.checked = false
            showImgUrlList.push(img)
          }
          this.imgUl = showImgUrlList
        }
      })
    },
    checkType(index) {
      this.goodsDetail.typeList.forEach((item) => {
        item.checked = false
      })
      this.goodsDetail.typeList.forEach((item,index1) => {
        if (index1 === index) {
          item.checked = true
        }
      })
    },
    checkSet(index) {
      this.goodsDetail.setList.forEach((item) => {
        item.checked = false
      })
      this.goodsDetail.setList.forEach((item,index1) => {
        if (index1 === index) {
          item.checked = true
        }
      })
    },
    checkService(index) {
      this.goodsDetail.serviceList.forEach((item) => {
        item.checked = false
      })
      this.goodsDetail.serviceList.forEach((item,index1) => {
        if (index1 === index) {
          item.checked = true
        }
      })
    },
    checkRAM(index) {
      this.goodsDetail.RAMList.forEach((item) => {
        item.checked = false
      })
      this.goodsDetail.RAMList.forEach((item,index1) => {
        if (index1 === index) {
          item.checked = true
        }
      })
    },
    checkTestImg(index) {
      this.imgUl.forEach((item) => {
        item.checked = false
      })
      this.imgUl.forEach((item,index1) => {
        if (index1 === index) {
          item.checked = true
        }
      })
    },
    addShopCart() {

    }
  },
  //created在DOM节点加载之前执行
  //mounted在DOM节点加载之后执行
  created() {
    let goodsDetail = {
      id: "123456",
      name: "Apple iPhone 12 (A2404) 256GB 蓝色 支持移动联通电信5G",
      price: 7399.00,
      discount: 6999.00,
      couponList: ["满5000减400","满3000减300"],
      wight: 0.368,
      colorList: [
        {
          color: "黑色",
          imgUrlList: [
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/176857/9/19739/153104/611cd418Ea16567cb/10062b43c154d915.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/148365/35/10544/41607/5f8617e9E8f9c9c20/d2d1b5acde7afb6d.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/155118/2/2200/90492/5f8617ecEa3a5df3a/d21ac63e3980e303.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/154268/23/2067/56921/5f8617f0E7b0d7eaa/5bed893881d9ddea.jpg",
            "https://img13.360buyimg.com/n1/s450x450_jfs/t1/166271/15/19937/233196/607f97e4Ecf2ec81b/6c5ed0151f53b715.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/143793/18/10733/65543/5f8617fbEcd2d418d/586ce1ddaa802373.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/176423/9/5663/314754/607f988bEe51391a5/353fb73d54982b7e.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/123480/9/14911/82376/5f8617ffEcf0c9501/f35f5aea6936e109.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/172726/5/5836/140445/607f9893E0ddab8e7/9e5fe5e4bc88700c.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/113553/12/19945/32196/5f861803E0f03951f/7046340655713ecb.jpg",
          ]
        },
        {
          color: "白色",
          imgUrlList: [
            "https://img11.360buyimg.com/n1/s450x450_jfs/t1/202939/20/1937/161028/611cd439Ef9d098df/edd9742cfedd9d09.jpg",
            "https://img11.360buyimg.com/n1/s450x450_jfs/t1/137591/4/10759/40857/5f861857Eea9f49d0/e6d818cb94e1cf5b.jpg",
            "https://img11.360buyimg.com/n1/s450x450_jfs/t1/122756/26/15018/60047/5f86185cE780b7b97/1dd74c3cf4e07129.jpg",
            "https://img11.360buyimg.com/n1/s450x450_jfs/t1/123461/36/14979/50780/5f861861Edd1a2281/a7a0190033630f52.jpg",
            "https://img13.360buyimg.com/n1/s450x450_jfs/t1/166271/15/19937/233196/607f97e4Ecf2ec81b/6c5ed0151f53b715.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/143793/18/10733/65543/5f8617fbEcd2d418d/586ce1ddaa802373.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/176423/9/5663/314754/607f988bEe51391a5/353fb73d54982b7e.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/123480/9/14911/82376/5f8617ffEcf0c9501/f35f5aea6936e109.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/172726/5/5836/140445/607f9893E0ddab8e7/9e5fe5e4bc88700c.jpg",
            "https://img11.360buyimg.com/n1/s450x450_jfs/t1/118477/4/20059/31596/5f86188aE08665d47/a4f875644cdc9270.jpg",
          ]
        },
        {
          color: "蓝色",
          imgUrlList: [
            "https://img13.360buyimg.com/n1/s450x450_jfs/t1/197477/3/3815/184791/611cd47eEa1eb7fbd/d1440bb7a3453771.jpg",
            "https://img13.360buyimg.com/n1/s450x450_jfs/t1/154676/35/2124/46018/5f8618acE12287a43/d9c4bb61feb3e466.jpg",
            "https://img13.360buyimg.com/n1/s450x450_jfs/t1/145504/32/10808/73833/5f8618afE45429d01/606a9f0db676d293.jpg",
            "https://img13.360buyimg.com/n1/s450x450_jfs/t1/120068/3/14936/62274/5f8618b3E07168d9c/c519b542fa1c5ccd.jpg",
            "https://img13.360buyimg.com/n1/s450x450_jfs/t1/166271/15/19937/233196/607f97e4Ecf2ec81b/6c5ed0151f53b715.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/143793/18/10733/65543/5f8617fbEcd2d418d/586ce1ddaa802373.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/176423/9/5663/314754/607f988bEe51391a5/353fb73d54982b7e.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/123480/9/14911/82376/5f8617ffEcf0c9501/f35f5aea6936e109.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/172726/5/5836/140445/607f9893E0ddab8e7/9e5fe5e4bc88700c.jpg",
            "https://img13.360buyimg.com/n1/s450x450_jfs/t1/151605/36/2204/33667/5f8618d4Efb5588ee/0bb644997065952e.jpg",
          ]
        },
        {
          color: "红色",
          imgUrlList: [
            "https://img11.360buyimg.com/n1/s450x450_jfs/t1/190384/35/18830/187816/611cd457E5b0d49d1/041cd94ab7b5b583.jpg",
            "https://img11.360buyimg.com/n1/s450x450_jfs/t1/131172/21/12265/49142/5f861966E43586a29/d67afe96710274bd.jpg",
            "https://img11.360buyimg.com/n1/s450x450_jfs/t1/138628/31/10829/84157/5f86196aEa9787131/ab34c81f8a2d8bcf.jpg",
            "https://img11.360buyimg.com/n1/s450x450_jfs/t1/124283/8/14781/83528/5f86196dEf88a02bd/b42fcd5f1cd91de2.jpg",
            "https://img13.360buyimg.com/n1/s450x450_jfs/t1/166271/15/19937/233196/607f97e4Ecf2ec81b/6c5ed0151f53b715.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/143793/18/10733/65543/5f8617fbEcd2d418d/586ce1ddaa802373.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/176423/9/5663/314754/607f988bEe51391a5/353fb73d54982b7e.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/123480/9/14911/82376/5f8617ffEcf0c9501/f35f5aea6936e109.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/172726/5/5836/140445/607f9893E0ddab8e7/9e5fe5e4bc88700c.jpg",
            "https://img11.360buyimg.com/n1/s450x450_jfs/t1/120132/35/14847/36473/5f861982E83b5684a/cf5ab71b15e4f173.jpg",
          ]
        },
        {
          color: "紫色",
          imgUrlList: [
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/189815/1/19042/176370/611cd4c3Ee95da613/7d8add11d5a7e7f1.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/181258/22/147/131472/607f3ab3E4bdd2802/0a7fb9c3dde3299a.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/174048/34/5695/207910/607f3ab7E8117a346/f6d17f7f44eb61ab.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/165638/24/20008/199309/607f3abbE7716be5e/0fcf976410a0c981.jpg",
            "https://img13.360buyimg.com/n1/s450x450_jfs/t1/166271/15/19937/233196/607f97e4Ecf2ec81b/6c5ed0151f53b715.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/143793/18/10733/65543/5f8617fbEcd2d418d/586ce1ddaa802373.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/176423/9/5663/314754/607f988bEe51391a5/353fb73d54982b7e.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/123480/9/14911/82376/5f8617ffEcf0c9501/f35f5aea6936e109.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/172726/5/5836/140445/607f9893E0ddab8e7/9e5fe5e4bc88700c.jpg",
            "https://img12.360buyimg.com/n1/s450x450_jfs/t1/171159/22/20155/74507/607f3acfE046aec5e/a1df1db2ed6cc0f1.jpg",
          ]
        },
      ],
      RAMList: [{name:"64GB"},{name:"128GB"},{name:"256GB"}],
      typeList: [{name:"公开版"},{name:"AirPods套装"},{name:"快充套装"},{name:"官方标配"}],
      setList: [{name:"优惠套装1"},{name:"优惠套装2"},{name:"优惠套装3"},{name:"优惠套装4"},{name:"优惠套装5"},{name:"优惠套装6"}],
      serviceList: [{name:"换休无忧月付版"},{name:"换休无忧年付版"},{name:"原厂电池换新"}, {name:"碎屏保"},{name:"黑科技充电宝"}],
    }
    for (let i = 0; i < goodsDetail.colorList.length; i++) {
      i == 0 ? goodsDetail.colorList[i] = Object.assign(goodsDetail.colorList[i],{checked:true})
          : goodsDetail.colorList[i] = Object.assign(goodsDetail.colorList[i],{checked:false})
    }
    for (let i = 0; i < goodsDetail.RAMList.length; i++) {
      i == 0 ? goodsDetail.RAMList[i] = Object.assign(goodsDetail.RAMList[i],{checked:true})
          : goodsDetail.RAMList[i] = Object.assign(goodsDetail.RAMList[i],{checked:false})
    }
    for (let i = 0; i < goodsDetail.typeList.length; i++) {
      i == 0 ? goodsDetail.typeList[i] = Object.assign(goodsDetail.typeList[i],{checked:true})
          : goodsDetail.typeList[i] = Object.assign(goodsDetail.typeList[i],{checked:false})
    }
    // eslint-disable-next-line no-unused-vars
    goodsDetail.setList.forEach((item) => {
      item = Object.assign(item,{checked:false})
    })
    // eslint-disable-next-line no-unused-vars
    goodsDetail.serviceList.forEach((item) => {
      item = Object.assign(item,{checked:false})
    })

    this.goodsDetail = goodsDetail
    // this.checkedImgUrl = this.imgUl[0].url
    this.checkColor(0)
  },
  mounted() {

  }
}
</script>

<style scoped>
.img_list{
  list-style-type:none;float: left; padding: 5px;
}
.img_list_not_checked{
  border: 2px solid #ffffff;
}
.img_list_checked{
  border: 2px solid #F56C6C;
}
</style>
